<template>
  <el-tree-select node-key="id" value-key="id" filterable :props="treeProps" :check-strictly="true" :multiple="multiple"
    :show-checkbox="multiple" :data="treeData" v-model="selections" :default-expanded-keys="expandKeys"
    :filter-node-method="filterNodeMethod" />
</template>

<script lang="ts">
export default {
  name: 'AutumnTreeSelect'
}
</script>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { $convertTree } from 'src/util/tools'

const props = defineProps({
  modelValue: {
    type: [String, Array<String>],
    default: () => ''
  },
  data: {
    type: Array,
    default: () => []
  },
  expandKeys: {
    type: Array<String>,
    default: () => []
  },
  multiple: {
    type: Boolean,
    default: () => false
  },
  treeProps: {
    type: Object,
    default() {
      return {
        label: "name"
      }
    }
  }
})

const treeData = computed(() => $convertTree(props.data))

//选中值
const emits = defineEmits(['update:modelValue'])
const selections = computed({
  get() {
    return props.modelValue
  },
  set(newVal: String | Array<String>) {
    emits('update:modelValue', newVal)
  }
})

//筛选
const filterNodeMethod = (value: any, data: any) => data[props.treeProps.label || 'label'].includes(value)

</script>
